Express Checkout

Note: Spartacus 3.x is no longer maintained. Please upgrade to the latest version.

Note: Spartacus 3.x was tested with SAP Commerce Cloud versions 1905 to 2105. Spartacus 3.x has not been verified to work with (and is not guaranteed to work with) SAP Commerce Cloud 2211 or later releases.

Note: This feature is introduced with version 1.2 of the Spartacus libraries.

Express checkout allows the user to skip all steps and sees the review summary page instantly after click “Go to checkout”.

The guard will check that the user has at least 1 shipping address and 1 payment method - if there are more it will choose default. After setup address, it will choose the default delivery mode for current configuration.

If everything has been successful, the user should be redirected to review summary. Else, he will go through the checkout steps.

In the review summary step, the user will see pre-set data, there is also the possibility to update step.

Table of Contents

• Configuration
  • Default Configuration
  • Own Configuration
  • Configuration Specification
  • Examples

Configuration

Functionality is steering by 2 new optional properties:

• Flag express: Allow for express checkout when default shipping method and payment method are available.
• Array defaultDeliveryMode: Default delivery mode for i.a. for express checkout. Set preferences in order with general preferences (eg. DeliveryModePreferences.LEAST_EXPENSIVE) or specific delivery codes.

  checkout?: {
    //...
    express?: boolean;
    defaultDeliveryMode?: Array<DeliveryModePreferences | string>;
  };

enum DeliveryModePreferences {
  FREE = 'FREE',
  LEAST_EXPENSIVE = 'LEAST_EXPENSIVE', // but not free
  MOST_EXPENSIVE = 'MOST_EXPENSIVE',
}

Default Configuration

  checkout: {
    //...
    express: false,
    defaultDeliveryMode: [DeliveryModePreferences.FREE],
  };

Own Configuration

To provide your own configuration, you can provide it in module providers with provideConfig function:

provideConfig({
  //...
  checkout: {
    //...
    express: true,
    defaultDeliveryMode: ['sample-code'],
  },
});

Configuration Specification

For default delivery mode we provide an array of values.

The algorithm will choose the first matched option from available.

Examples

We have sample data:

const [FREE_CODE, STANDARD_CODE, PREMIUM_CODE] = [
  'free-gross',
  'standard-gross',
  'premium-gross',
];
const [freeMode, standardMode, premiumMode] = [
  { deliveryCost: { value: 0 }, code: FREE_CODE },
  { deliveryCost: { value: 2 }, code: STANDARD_CODE },
  { deliveryCost: { value: 3 }, code: PREMIUM_CODE },
];

• For defaultDeliveryMode: [DeliveryModePreferences.FREE] we can expect behavior:

availableDeliveryModes: [freeMode, standardMode, premiumMode]
result: FREE_CODE

availableDeliveryModes: [standardMode, premiumMode]
result: STANDARD_CODE

availableDeliveryModes: [premiumMode]
result: PREMIUM_CODE

• For defaultDeliveryMode: [DeliveryModePreferences.LEAST_EXPENSIVE] we can expect behavior:

availableDeliveryModes: [freeMode, standardMode, premiumMode]
result: STANDARD_CODE

availableDeliveryModes: [standardMode, premiumMode]
result: STANDARD_CODE

availableDeliveryModes: [premiumMode]
result: PREMIUM_CODE

• For defaultDeliveryMode: [DeliveryModePreferences.FREE, DeliveryModePreferences.MOST_EXPENSIVE] we can expect behavior:

availableDeliveryModes: [freeMode, standardMode, premiumMode]
result: FREE_CODE

availableDeliveryModes: [standardMode, premiumMode]
result: PREMIUM_CODE

availableDeliveryModes: [standardMode]
result: STANDARD_CODE

• For specified codes defaultDeliveryMode: [STANDARD_CODE] we can expect behavior:

availableDeliveryModes: [freeMode, standardMode, premiumMode]
result: STANDARD_CODE